/** 
 
*/
import React, { PureComponent } from 'react';
import { NoDataMaskC } from '../../../../comps';
import 'moment/locale/zh-cn';
import myStyle from './style.less';

class HeadInfoC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tradingName: '--', // 证券名称
      remainingTer: '--', // 剩余期限
      issueRate: '--', // 发行利率
      masking: true, // 是否显示蒙版
    };
  }

  componentDidMount() {
    const { info } = this.props;
    // const info = { tradingName: 'XXXXXXXX永乐五号', remainingTer: '100天', issueRate: '6.95%' }
    if (info == undefined) {
      this.setState({
        tradingName: '--', // 证券名称
        remainingTer: '--', // 剩余期限
        issueRate: '--', // 发行利率
      });
    } else {
      this.setState({
        tradingName: info.tradingName ? info.tradingName : '--', // 证券名称
        remainingTer: info.remainingTer ? info.remainingTer : '--', // 剩余期限
        issueRate: info.issueRate ? info.issueRate : '--', // 发行利率
        masking: false,
      });
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { info } = this.props;
    let flag = false;
    if (nextProps.info) {
      if (info) {
        for (let k in nextProps.info) {
          if (info[k] !== nextProps.info[k]) {
            flag = true;
            break;
          }
        }
      } else {
        flag = true;
      }
      if (flag) {
        this.setState({
          tradingName: nextProps.info.tradingName ? nextProps.info.tradingName : '--', // 证券名称
          remainingTer: nextProps.info.remainingTer ? nextProps.info.remainingTer : '--', // 剩余期限
          issueRate: nextProps.info.issueRate ? nextProps.info.issueRate : '--', // 发行利率
          masking: false,
        });
      }
    } else {
      this.setState({
        tradingName: '--', // 证券名称
        remainingTer: '--', // 剩余期限
        issueRate: '--', // 发行利率
        masking: true,
      });
    }
  }

  render() {
    const { masking, remainingTer, issueRate, tradingName } = this.state;
    return (
      <div className={myStyle.headInfoContainer}>
        <div className={myStyle.headInfoLeftItem}>
          <div className={myStyle.showTop}>
            <span>{tradingName}</span>
          </div>
          <div className={myStyle.showBottom}>
            <div className={myStyle.showLeft}>
              <span style={{ padding: '0 20px 0 50px' }}>剩余期限 </span>
              <span>{remainingTer}</span>
            </div>
            <div className={myStyle.showRight}>
              <span style={{ padding: '0 20px 0 50px' }}>发行利率 </span>
              <span>{issueRate}</span>
            </div>
          </div>
          {masking ? <NoDataMaskC height={'88px'} title={'请选择证券代码！'} /> : null}
        </div>
      </div>
    );
  }
}
export default HeadInfoC;
